<template>
  <el-dialog
    title="学业问题详情"
    v-model="dialogVisible"
    width="600px"
    custom-class="academic-detail-dialog"
  >
    <div class="detail-content">
      <div class="student-info">
        <div class="info-header">
          <el-avatar 
            :size="64" 
            :style="{ backgroundColor: '#409EFF', color: '#fff' }"
          >
            {{ student.name?.[0] || '学' }}
          </el-avatar>
          <div class="basic-info">
            <h3>{{ student.name }}</h3>
            <p>{{ student.class }} | 学号：{{ student.id }}</p>
          </div>
        </div>
      </div>
      
      <el-divider />
      
      <div class="issue-details">
        <h4>问题类型：{{ student.issue }}</h4>
        
        <!-- 不及格课程详情 -->
        <div class="detail-section" v-if="student.issue?.includes('不及格') && failedCourses.length > 0">
          <h5>不及格课程详情：</h5>
          <el-tag 
            v-for="course in failedCourses" 
            :key="course.name"
            :type="course.score < 50 ? 'danger' : 'warning'"
            class="course-tag"
          >
            {{ course.name }} ({{ course.score }}分)
          </el-tag>
        </div>
        
        <!-- 缺课记录 -->
        <div class="detail-section" v-if="student.issue === '缺课次数过多'">
          <h5>缺课记录：</h5>
          <el-table :data="absenceRecords" border stripe>
            <el-table-column prop="course" label="课程名称" />
            <el-table-column prop="times" label="缺课次数" width="100" />
            <el-table-column prop="percentage" label="缺课率" width="100" />
          </el-table>
        </div>
        
        <!-- 学分完成情况 -->
        <div class="detail-section" v-if="student.issue === '选修学分不足' && creditProgress">
          <h5>学分完成情况：</h5>
          <el-progress 
            :percentage="creditProgress.percentage" 
            :status="creditProgress.status"
          />
          <p class="credit-info">
            已修学分：{{ creditProgress.completed }}/{{ creditProgress.required }} 
            (还需修读：{{ creditProgress.required - creditProgress.completed }})
          </p>
        </div>

        <!-- 考试作弊记录 -->
        <div class="detail-section" v-if="student.issue === '考试作弊记录'">
          <h5>违纪情况：</h5>
          <el-alert
            title="存在考试违纪行为"
            type="error"
            description="在期中考试中存在作弊行为，需要接受学院处分并参加诚信教育。"
            :closable="false"
            show-icon
          />
        </div>
      </div>
      
      <div class="suggestion-section">
        <h4>建议措施：</h4>
        <el-card class="suggestion-card" shadow="never">
          <template #header>
            <div class="suggestion-header">
              <i class="el-icon-warning-outline"></i>
              <span>辅导建议</span>
            </div>
          </template>
          <ul class="suggestion-list">
            <li v-for="(suggestion, index) in suggestions" :key="index">
              {{ suggestion }}
            </li>
          </ul>
        </el-card>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handlePrint">打印报告</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  student: {
    type: Object,
    required: true
  }
});

const dialogVisible = ref(false);

// 根据学生问题类型计算相应的详细信息
const failedCourses = computed(() => {
  if (!props.student.issue) return [];
  
  if (props.student.issue === '1门课程不及格') {
    return [{ name: '高等数学', score: 55 }];
  } else if (props.student.issue === '2门课程不及格') {
    return [
      { name: '高等数学', score: 45 },
      { name: '线性代数', score: 52 }
    ];
  } else if (props.student.issue === '3门课程不及格') {
    return [
      { name: '高等数学', score: 45 },
      { name: '线性代数', score: 48 },
      { name: '数据结构', score: 50 }
    ];
  }
  return [];
});

const absenceRecords = computed(() => {
  if (props.student.issue !== '缺课次数过多') return [];
  return [
    { course: '计算机网络', times: 6, percentage: '40%' },
    { course: '操作系统', times: 4, percentage: '26.7%' },
    { course: '软件工程', times: 5, percentage: '33.3%' }
  ];
});

const creditProgress = computed(() => {
  if (props.student.issue !== '选修学分不足') return null;
  return {
    completed: 12,
    required: 20,
    percentage: 60,
    status: 'warning'
  };
});

const suggestions = computed(() => {
  const baseSuggestions = [
    '建议进行一对一辅导，制定个性化学习计划',
    '定期与任课教师沟通学习进度和难点'
  ];
  
  if (props.student.issue?.includes('不及格')) {
    baseSuggestions.push('重点复习不及格科目的基础知识点');
    baseSuggestions.push('参加学院组织的期末考试辅导');
    baseSuggestions.push('建议参加相关课程的课外辅导班');
  }
  
  if (props.student.issue === '缺课次数过多') {
    baseSuggestions.push('加强考勤管理，保持良好的学习习惯');
    baseSuggestions.push('及时补充缺课期间的学习内容');
    baseSuggestions.push('与任课教师沟通补课事宜');
  }
  
  if (props.student.issue === '选修学分不足') {
    baseSuggestions.push('合理规划选修课程，确保按期完成学分要求');
    baseSuggestions.push('咨询教务处了解可选的补修课程');
    baseSuggestions.push('关注选课通知，及时选择合适的课程');
  }

  if (props.student.issue === '考试作弊记录') {
    baseSuggestions.length = 0; // 清空之前的建议
    baseSuggestions.push('严格遵守考试纪律，杜绝作弊行为');
    baseSuggestions.push('加强诚信教育，树立正确的学习态度');
    baseSuggestions.push('接受学院相关处分，并吸取教训');
    baseSuggestions.push('主动与辅导员沟通，制定改正计划');
  }
  
  return baseSuggestions;
});

const show = () => {
  dialogVisible.value = true;
};

const handlePrint = () => {
  window.print();
};

defineExpose({
  show
});
</script>

<style lang="less" scoped>
.academic-detail-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 30px;
  }
}

.detail-content {
  .student-info {
    .info-header {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .basic-info {
        h3 {
          margin: 0 0 8px 0;
          font-size: 20px;
        }
        p {
          margin: 0;
          color: #666;
        }
      }
    }
  }
  
  .issue-details {
    margin-top: 20px;
    
    h4 {
      color: #e6a23c;
      margin-bottom: 15px;
    }
    
    .detail-section {
      margin: 15px 0;
      
      h5 {
        margin-bottom: 10px;
        color: #606266;
      }
      
      .course-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
      
      .credit-info {
        margin-top: 10px;
        color: #606266;
      }
    }
  }
  
  .suggestion-section {
    margin-top: 20px;
    
    h4 {
      color: #409EFF;
      margin-bottom: 15px;
    }
    
    .suggestion-card {
      background-color: #f8f9fa;
      
      .suggestion-header {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #409EFF;
      }
      
      .suggestion-list {
        margin: 0;
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
          color: #606266;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style> 